<template>
  <el-container>
    <el-header class="el-header">
      <h2>写点什么</h2>
    </el-header>
    <mark-down-dialog :visible.sync="dialogVisible"
                      title="markdown 预览" :mdContent="post.content"></mark-down-dialog>
    <el-main>
      <el-row :gutter="24">
        <el-col :span="16">
          <el-input v-model="post.title" placeholder="请输入标题"></el-input>
        </el-col>
        <el-col :span="8">
          <el-select v-model="post.module" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-input type="textarea" :rows="24" placeholder="请输入内容，支持使用 markdown 语法"
                v-model="post.content" class="txt-area"></el-input>
      <el-button-group class="btnGroup">
        <el-button round @click="submitMsg()">提交</el-button>
        <el-button round @click="dialogVisible = true">预览</el-button>
      </el-button-group>
    </el-main>
  </el-container>
</template>

<script>
import {LocalService, PostService} from '@/service/api'
import {Code} from '@/common/code'
import MarkDownDialog from '@/components/common/MarkDownDialog'

export default {
  components: {
    'mark-down-dialog': MarkDownDialog
  },
  data () {
    return {
      post: {
        title: null,
        content: null,
        module: null
      },
      mdContent: null,
      dialogVisible: false,
      options: [
        {
          value: Code.Lab,
          label: Code.moduleFormat(Code.Lab)
        }, {
          value: Code.Yjfx,
          label: Code.moduleFormat(Code.Yjfx)
        }, {
          value: Code.Ryzc,
          label: Code.moduleFormat(Code.Ryzc)
        }, {
          value: Code.Tdjs,
          label: Code.moduleFormat(Code.Tdjs)
        }, {
          value: Code.Sysxw,
          label: Code.moduleFormat(Code.Sysxw)
        }, {
          value: Code.Kycg,
          label: Code.moduleFormat(Code.Kycg)
        }, {
          value: Code.Xsjl,
          label: Code.moduleFormat(Code.Xsjl)
        }, {
          value: Code.Jszt,
          label: Code.moduleFormat(Code.Jszt)
        }],
      total: 0
    }
  },
  beforeDestroy: function () {
    LocalService.SaveTmpPost(this.post.title, this.post.content, this.post.module)
  },
  mounted: function () {
    let post = LocalService.GetTmpPost()
    this.post.title = post.title === 'null' || post.title === 'undefined' ? null : post.title
    this.post.content = post.content === 'null' || post.content === 'undefined' ? null : post.content
    this.post.module = post.module === 'null' || post.module === 'undefined' ? null : post.module
  },
  methods: {
    submitMsg: function () {
      PostService.create(this.post)
        .then(res => {
          if (res === 'success') {
            this.$message.success('提交成功')
          }
        })
    }
  }
}
</script>

<style scoped>
  .btnGroup{
    height: 100%;
    margin-top: 20px;
  }

  .txt-area {
    margin-top: 20px;
  }
</style>
